import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

// 静态路由：比如登录 404 首页都不需要加权限
// 动态路由：需要有权限才能访问的页面叫动态路由
export const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/workbench'
  },
  // 只有一级路由
  // 一级路由：负责把layout架子渲染出来
  // 二级路由：path为空 会作为默认的二级路由一上来就渲染出来
  {
    path: '/workbench',
    component: Layout,
    children: [
      {
        path: '',
        component: () => import('@/views/Workbench/index'),
        meta: { title: '工作台', icon: 'el-icon-data-board' }
      }
    ]
  },

  {
    path: '/addEnterprise',
    component: () => import('@/views/Park/Enterprise/AddEnterprise')
  },
  {
    path: '/enterpriseDetail/:id',
    component: () => import('@/views/Park/Enterprise/EnterpriseDetail')
  },

  {
    path: '/car/addMonthCard',
    component: () => import('@/views/Car/CarCard/addMonthCard')
  },

  {
    path: '/sys/addRole',
    component: () => import('@/views/System/Role/AddRole')
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  }
]

// 通过箭头函数创建Router实例
// 路由模式两种：history hash
// 特点：hash #来连接地址和路由。后面的路径不会请求到服务端，所以不会出现404
// history/来连接地址和路由/后面的路径会请求的服务端。但是项目打完包之后只有一个index.html和favicon.ic
// 所以history模式下刷新的时候会出现404
// 总结：hash模式在任何环境下都不会出现问题
// history模式，在开发环境不会有问题（webpack提前把4o4的问题给你解决了），但发布之后就有4o4的问题
// 怎么去解决history模式下线上4o4的问题
// 官网的解决方案：https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子
const createRouter = () =>
  new Router({
    // base 影响的是组件匹配。
    // 假如运维将我们的站点部署到一个子目录下。比如 admin 文件夹下。路由匹配组件，线上可能就会有问题。比如我们路由写的 /user，
    // 转化成完整路径就是 www.a.com/user 去匹配 User.vue 组件，但是生产上是 www.a.com/admin/user 去匹配 User.vue 组件，那肯定就匹配不上，所以我们需要在 router 配置里面，统一配置下 base: "/admin"。
    // base: '/hmzs',
    // mode: 'history', // require service support
    mode: 'hash',
    scrollBehavior: () => ({ y: 0 }),
    routes: routes
  })

const router = createRouter()

// 重置路由方法
export function resetRouter () {
  // 得到一个全新的router实例对象
  const newRouter = createRouter()
  // 使用新的路由记录覆盖掉老的路由记录
  router.matcher = newRouter.matcher
}

export default router
